$hl-color: #f90;
$base-border: 1px solid black;
#app {
  background-color:  $hl-color;
  border: $base-border
}
// @mixin dan {
//   overflow: hidden;
//   text-overflow: ellipsis;
//   white-space: nowrap;
// }


// .myMixin {
//   p {
//     @include dan;
//     width: 100px;
//   }
// }

@mixin dan($fz) {
  font-size: $fz;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.myMixin {
  p {
    @include dan(30px);
    width: 100px;
  }
}
// 主轴
$flex-jc: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around,
  'evenly': space-evenly,
);


// $each 进行遍历
@each $flexKey, $flexValue in $flex-jc { 
  .jc-#{$flexKey} {
    justify-content: $flexValue;
  }
}